<template>
  <div>
    <el-container>
      <!--      头部-->
      <el-header>
        <el-row type="flex">
          <el-col :span="2">
            <el-image :src="require('@/assets/img.png')" style="height: 100%;border-radius: 3px" fit="fill"/>
          </el-col>
          <el-col>
            <el-menu mode="horizontal" background-color="#409EFF" text-color="#ffffff" :router="true" active-text-color="#000000">
              <el-menu-item index="/index/home">首页</el-menu-item>
              <el-menu-item index="/index/jobs">职位</el-menu-item>
              <div class="user">
                <el-badge value="new" class="useritem">
                  <el-button type="text" style="color: white" @click="message">消息</el-button>
                </el-badge>
                <template class="useritem">
                  <el-dropdown >
                    <el-avatar  :src="user.imgUrl"></el-avatar>
                    <span style="color: white">{{user.name}}</span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <el-button type="text" @click="tomine">个人中心</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button type="text" @click="logout">退出</el-button>
                      </el-dropdown-item>

                    </el-dropdown-menu>

                  </el-dropdown>
                </template>
              </div>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {requests} from "@/utils/request";
import {getuserinfo} from "@/mixin";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "index",
  data(){
    return{
      websock:{}
    }
  },
  created() {
    this.initWebSocket()
  },
  mounted() {
  },
  destroyed() {
    this.websock.close()
  },
  methods:{
    message(){
      this.$router.push("/index/message")
      this.websocketsend("hcb")
    },
    initWebSocket () {
      // userId 为websocket消息的唯一标识
      this.websock = new WebSocket('ws://101.132.167.26:8080/websocket/'+localStorage.getItem("userid"))
      this.websock.onmessage = this.websocketonmessage
      this.websock.onerror = this.websocketonerror
      this.websock.onopen = this.websocketonopen
      this.websock.onclose = this.websocketclose
    },
    websocketonopen () {
      // 连接建立之后执行send方法发送数据
      console.log("WebSocket连接成功");
    },
    websocketonerror () {
      console.log( 'WebSocket连接失败')
    },
    websocketonmessage (e) {
      this.$message({
        type:"success",
        message:"您有一条新消息"
      })
      const  m=JSON.parse(e.data)
      this.$bus.$emit("onmessage",m)
    },
    websocketsend (Data) {
      // 数据发送
      this.websock.send(Data)
    },
    websocketclose (e) {
      // 关闭
      console.log('已关闭连接', e)
    },
    tomine(){
      this.$router.replace('/index/mine')
    },
    //退出
    logout(){
      localStorage.clear()
      this.$router.replace('/login')
    }
  },
  mixins:[getuserinfo]
}
</script>

<style scoped>
.user{
  float: right;
  padding-right: 1rem;
}
.useritem{
  margin-right: 1.5rem;
}
.card-count{
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  color: #5b7be9;
  margin-bottom: 0px;
}
.el-collapse__item{
  width:400px ;
}
</style>